<template>
  <div class="tool-part-color" :style="{ background: color }" ref="toolColor">
    <div class="pos thumb" @click="() => (showPicker = true)"></div>
    <div class="arrow"><img :src="publicUrl(`/images/pull-down.png`)" /></div>
    <div class="tool-color" v-show="showPicker">
      <ColorPicker
        :color="color"
        @color-change="updateColor"
        alpha-channel="hide"
      />
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import { publicUrl } from "@/utils/util";
import { ColorPicker } from "vue-accessible-color-picker";
import { onClickOutside } from "@vueuse/core";

interface Props {
  defColor: string;  //默认颜色
}

const toolColor = ref(null);
const { defColor } = withDefaults(defineProps<Props>(), {
  defColor: "#FFAC3F",
});
const showPicker = ref<boolean>(false);
const color = ref<string>(defColor);
const emits = defineEmits<{ (event: "changeColor", color: string): void }>();
onClickOutside(toolColor, () => (showPicker.value = false));

const updateColor = (eventData: any) => {
  color.value = eventData.colors.hex;
  emits("changeColor", eventData);
};
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
